import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { fetchBannerAction } from '../store/modules/banner'

export class Banner extends PureComponent {
  componentDidMount() {
    this.props.setBanner()
  }
  render() {
    const { banner } = this.props
    console.log(banner)
    return (
      <div>
        <h3>Banner数据</h3>
        <ul>
          {
            banner.map((item, index) => {
              return <li key={index}>{item.title}</li>
            })
          }
        </ul>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  banner: state.banner.banner
})
const mapDispatchToProps = (dispatch) => ({
  setBanner: () => dispatch(fetchBannerAction({name: 'banner'}))
})

export default connect(mapStateToProps,mapDispatchToProps)(Banner)